<!-- 发布乐跑 -->
<template>
  <div class="fire">
    <NavBar2 :fnTitle="title"></NavBar2>
    <div class="content">
      <van-notify v-model="show2" type="success">
        <van-icon name="bell" style="margin-right: 4px" />
        <span>保存成功</span>
      </van-notify>
      <van-notify v-model="show4" type="warning">
        <van-icon name="bell" style="margin-right: 4px" />
        <span>最多两张图片</span>
      </van-notify>
      <div class="send_info">
        <textarea id="send_info_text" placeholder="大家都想知道你闲置物品的信息" v-model="tabletext"> </textarea>
      </div>
      <div class="send_function">
        <van-uploader :after-read="afterRead" v-model="fileList" :deletable="true" ref="file"> </van-uploader>
      </div>
      <div class="fun">
        <van-icon name="balance-o" size="25" />
        <span>价格</span>
        <input type="text" v-model="value" placeholder="请输入售出价格" id="myinput" />
      </div>
    </div>
    <div class="btn_box"><button class="btn" @click="locationText">保存</button></div>
  </div>
</template>

<script>
import NavBar2 from '@/components/NavBar2'
import Vue from 'vue'
import { Dialog } from 'vant'
import axios from 'axios'
Vue.use(axios)
Vue.use(Dialog)
export default {
  created() {},
  data() {
    return {
      title: '发布闲置',
      checked: true,
      tabletext: '',
      show2: false,
      show4: false,
      value: '',
      tabletext: '',
      fileList: [],
      fileList_get: []
    }
  },
  components: {
    NavBar2
  },
  methods: {
    // 弹出层

    showNotify() {
      this.show2 = true
      setTimeout(() => {
        this.show2 = false
      }, 2000)
    },
    showNotify2() {
      this.show4 = true
      setTimeout(() => {
        this.show4 = false
      }, 2000)
    },
    afterRead(files) {
      const that = this
      const file = new FormData()
      file.append('file', files.file)
      axios
        .post('http://39.96.36.251/api/file/photo', file, {
          'content-type': 'multipart/form-data'
        })
        .then(function (res) {
          that.fileList_get.push(res.data)
          if (that.fileList_get.length >= 3) {
            that.showNotify2()
            that.$delete(that.fileList_get, 2)
            that.$delete(that.fileList, 2)
          }
        })
    },
    locationText() {
      var val = this.tabletext
      sessionStorage.setItem('CoinText', val)
      sessionStorage.setItem('Coinpicture1', this.fileList_get[0])
      sessionStorage.setItem('Coinpicture2', this.fileList_get[1])
      sessionStorage.setItem('CoinPrice', this.value)
      this.showNotify()
    }
  }
}
</script>

<style scoped>
#myinput {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  outline: none;
  border: 1px solid rgb(162, 162, 162);
  border-radius: 5px;
}
#myinput:focus {
  border: 1px solid rgb(63, 150, 216);
}
.memedata {
  text-align: center;
}
.info_show {
  height: 500px;
  /* width: 300px; */
  overflow: hidden;
  overflow-y: scroll;
}
.btn_box {
  text-align: center;
}
.btn {
  margin-top: 1%;
  border: 0.026667rem solid #fff;
  border-radius: 0.533333rem;
  background-color: rgb(243, 133, 60);
  color: #fff;
  width: 30%;
  height: 0.8rem;
}
#send_info_text {
  margin-top: 5px;
  display: block;
  width: calc(90vw);
  padding: 10px;
  height: calc(40vh);
  margin: 0 auto;
  background-color: rgba(228, 228, 228, 0.644);
  border: none;
  outline: none;
  resize: none;
}
.send_function {
  margin-top: 5px;
  width: calc(90vw);
  padding: 10px;
  margin: 0 auto;
  /* vertical-align: middle; */
}
.send_function span {
  /* display: inline-block; */
  /* height: 25px; */
  vertical-align: middle;
  margin-left: 15px;
  font-size: 15px;
}
.fun {
  height: 50px;
  padding: 0 15px;
  margin: 10px 0;
  /* vertical-align: middle!important; */
}
.van-icon {
  vertical-align: middle !important;
}
.van-switch {
  float: right;
}
</style>
